<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑学生信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f7fc;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    header {
      background-color: #4CAF50;
      color: white;
      padding: 15px;
      text-align: center;
    }
    h1 {
      margin: 0;
    }
    .container {
      width: 90%;
      max-width: 500px;
      margin: 20px auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      color: #333;
    }
    input[type="text"], input[type="number"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <header>
    <h1>编辑学生信息</h1>
  </header>
  
  <div class="container">
    <form id="editForm" method="POST">
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" required>
      
      <label for="age">年龄</label>
      <input type="number" id="age" name="age" required>
      
      <label for="major">专业</label>
      <input type="text" id="major" name="major" required>
      
      <button type="submit">提交</button>
    </form>
  </div>

  <script>
    // 获取URL中的学生ID参数
    const params = new URLSearchParams(window.location.search);
    const studentId = params.get('id');

    // 填充表单数据
    fetch(`/students/edit/${studentId}`)
      .then(response => response.json())
      .then(data => {
        document.getElementById('name').value = data.name;
        document.getElementById('age').value = data.age;
        document.getElementById('major').value = data.major;
      });

    // 表单提交处理
    document.getElementById('editForm').onsubmit = function(event) {
      event.preventDefault();
      const name = document.getElementById('name').value;
      const age = document.getElementById('age').value;
      const major = document.getElementById('major').value;

      fetch(`/students/edit/${studentId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ name, age, major })
      })
      .then(() => {
        // 编辑成功后跳转到学生列表页面
        window.location.href = '/students.html';
      })
      .catch(error => {
        console.error('提交失败:', error);
        alert('编辑失败，请稍后重试。');
      });
    };
  </script>
</body>
</html>
